/**
 * Created by huotaol on 2017/5/15.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {Image, Text, TextInput, TouchableOpacity, View} from "react-native";
import CustomStyle from "../../../../common/style/CustomStyle";
import {Actions} from "react-native-router-flux";


export default class SearchHeader extends Component {
    static propTypes = {
        titleHolder: PropTypes.string,
        confirm: PropTypes.func,
    };

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {value: ''};
    }

    render() {
        return (
            <View style={[{
                backgroundColor: '#FFC000',
                flexDirection: 'row',
                paddingTop: CustomStyle.navBasePaddingTop,
                width: CustomStyle.screenWidth,
                height: CustomStyle.navTotalHeight,
                alignItems: 'center',
                justifyContent: 'flex-end',
                paddingLeft: CustomStyle.getActualSizeInHorizontal(16),
                paddingRight: CustomStyle.getActualSizeInHorizontal(16),
            }]}>
                <TouchableOpacity
                    style={{
                        width: CustomStyle.getActualSizeInHorizontal(48),
                        height: CustomStyle.getActualSizeInVertical(48),
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}
                    onPress={() => {
                        Actions.pop();
                    }}
                >
                    <Image source={require('../../../../img/header_back.png')}
                           style={{
                               width: CustomStyle.getActualSizeInHorizontal(18),
                               height: CustomStyle.getActualSizeInVertical(32),
                           }}
                    />
                </TouchableOpacity>

                <View
                    style={{
                        justifyContent: 'center',
                        backgroundColor: '#ffffff',
                        height: CustomStyle.getActualSizeInVertical(68),
                        borderRadius: CustomStyle.getActualSizeInVertical(34),
                        flex: 1,
                        marginLeft: CustomStyle.getActualSizeInHorizontal(16),
                        marginRight: CustomStyle.getActualSizeInHorizontal(16),
                        paddingLeft: CustomStyle.getActualSizeInHorizontal(16),
                        paddingRight: CustomStyle.getActualSizeInHorizontal(16),
                    }}
                >
                    <TextInput
                        style={[CustomStyle.baseText, {flex: 1,}]}
                        placeholder={this.props.titleHolder}
                        textAlign='center'
                        value={this.state.value}
                        underlineColorAndroid={'#00000000'}
                        onChangeText={(value) => {
                            this.setState({value: value});
                        }}
                    />

                </View>
                <TouchableOpacity
                    onPress={() => {
                        this.props.confirm(this.state.value);
                    }}
                    style={{
                        alignItems: 'center',
                    }}
                >
                    <Text style={[CustomStyle.baseText, {
                        color: '#ffffff',
                        fontSize: CustomStyle.getActualSizeInHorizontal(32),
                    }]}>搜索</Text>
                </TouchableOpacity>
            </View>
        );
    }
}